<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>MYWAY AIRLINE</title>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="/css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="/css/liMarquee.css"/>
		<link rel="stylesheet" type="text/css" href="/css/minimal/blue.css"/>
		<link rel="stylesheet" type="text/css" href="/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="/css/common.css"/>
		<link rel="stylesheet" type="text/css" href="/css/cityselect.css"/>
		<link rel="stylesheet" type="text/css" href="/css/pagination.css"/>
		<link rel="stylesheet" type="text/css" href="/css/hotel.css"/>
		<style>
			.notfund{
				height:250px;
				line-height: 250px;
				text-align: center;
			}
			.notfund img{
				padding:10px;
			}
		</style>
	</head>
	<body>
		<jsp:include page="head.jsp"/>
		<main class="main_gay">
			<div class="container">
				<div class="searchBox">
					<form >
						<div class="inputBox">
							<div class="input-group destination">
						      	<div class="input-group-addon">目的地</div>
						      	<input type="text"  id="cityin" class="form-control" name="city" value="${city}" placeholder="">
						    </div>
							<div class="input-group during">
						      	<div class="input-group-addon">时间</div>
						      	<input type="text" class="form-control"  placeholder=""  id="to_" >
						    	<div class="input-group-addon">——</div>
						      	<input type="text" class="form-control"  placeholder="" id="from_" >
							</div>
							<div class="input-group keywords">
								<div class="input-group-addon">关键词</div>
								<input type="text" id="homekeyword" class="form-control key" name="keyword"  placeholder="">
							</div>
							<button class="classicButton hotel" type="button" onclick="subhotelinf()" >搜索</button>
						</div>
						<div class="selectBox" >
							<ul class="selectOutBox clearfix">
								<li class="clearfix rate">
									<div>房价：</div>
									<ul class="selectInBox clearfix">
										<%--<li class="notLimite">不限</li>--%>
										<li><input type="radio"  id="radio1"  name="Pic"  class="detPic" value="0,300" /><label>¥ 300元以下</label> </li>
										<li><input type="radio"  id="radio2"  name="Pic"  class="detPic" value="301,600" /><label>¥ 301-600元 </label></li>
										<li><input type="radio"  id="radio3"  name="Pic"  class="detPic" value="601,800" /><label>¥ 601-800  </label></li>
										<li><input type="radio"  id="radio4"  name="Pic"  class="detPic" value="801,1000" /><label>¥ 801-1000元</label> </li>
										<li><input type="radio"  id="radio5"  name="Pic"  class="detPic" value="1001" /><label>¥ 1001元以上</label></li>
										<li id="priceden">自定义<input type="text" name="Pic" id="lowprice"  />——<input type="text" name="Pic" id="highprice" /></li>
										<li id="a1"><a  onclick="subPrice()"  class="classicButton">确定</a></li>
									</ul>
								</li>
								<li class="clearfix level">
									<div>星级：</div>
									<ul class="selectInBox clearfix ">
										<%--<li class="notLimite">不限</li>--%>
										<li><input type="checkbox" name="lev" id="checkbox1" class="detLev" value=1 /><label>一星/平价</label></li>
										<li><input type="checkbox" name="lev" id="checkbox2" class="detLev" value=2 /><label>二星/平价</label></li>
										<li><input type="checkbox" name="lev" id="checkbox3" class="detLev" value=3 /><label>三星/舒适</label></li>
										<li><input type="checkbox" name="lev" id="checkbox4" class="detLev" value=4 /><label>四星/高档</label></li>
										<li><input type="checkbox" name="lev" id="checkbox5" class="detLev" value=5 /><label>五星/豪华</label></li>
									</ul>
								</li>
							</ul>
						</div>
					</form>
				</div>
				<div class="showBox outerBox">
					<div class="outerTitle">
						<p>精品推荐</p>
						<ul class="clearfix showKey">
							<li>综合排序</li>
							<li  id="sort_asc_price" class="sort_asc">价格</li>
							<li  id="sort_asc_star" class="sort_asc">星级</li>
							<li>共<i id="totalli"></i>条</li>
						</ul>
					</div>
					<div class="outerList hotellist">

					</div>
					<div class="outerListPage">
						<div id="Pagination"></div>
					</div>
				</div>
			</div>	
		</main>
		<jsp:include page="footer.jsp"/>
	</body>
	<script src="/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/laydate.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/jquery.pagination.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/icheck.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/hotel.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	$('input[type="radio"],input[type="checkbox"]').iCheck({
		checkboxClass: 'icheckbox_minimal-blue',
    	radioClass: 'iradio_minimal-blue',
	    increaseArea: '20%' // optional
	});
    var newTime=(new Date()).valueOf();
    var nTime= new Date();
    nTime.setDate(nTime.getDate()+1);
    laydate.render({
        elem: '#to_' //指定元素
        ,theme: '#0e68ab',
        min:newTime,
        format:'yyyy-MM-dd',
        value:new Date(),
    });
    laydate.render({
        elem: '#from_' //指定元素
        ,theme: '#0e68ab'
        , min:newTime,
        format:'yyyy-MM-dd',
        value:nTime,
    });


	//如果自定义价格区间，则需要删除其他价格区间的选中状态
	$('#priceden input').on('blur',function () {
        $(this).parent().parent().find('input[type="radio"]').iCheck('uncheck');
    })

    $('input[type="radio"]').on('ifClicked',function (event) {
        $('#priceden input').val("");
		$(this).iCheck('uncheck');
    })
	//选中框状态改变时触发
    $('input[type="radio"],input[type="checkbox"]').on('ifChanged',function (event) {
        subhotelinf ();
    })

	//按价格排序部分
	$('#sort_asc_price').on('click',function(){
        clearOrderByLi();
		if($(this).hasClass('sort_asc')){
			$(this).addClass('sort_desc').removeClass('sort_asc');
			//TODO
			//降序
            $("#sort_asc_price").val(1);
            subhotelinf();
			return;
		}
		if($(this).hasClass('sort_desc')){
			$(this).addClass('sort_asc').removeClass('sort_desc');
            //TODO
            //升序
            $("#sort_asc_price").val(2);
            subhotelinf();
			return;
		}

	});
    //按星级排序部分
	$('#sort_asc_star').on('click',function(){
        clearOrderByLi();
		if($(this).hasClass('sort_asc')){
			$(this).addClass('sort_desc').removeClass('sort_asc');
			//TODO
            $("#sort_asc_star").val(3);
            subhotelinf();
			return;
		}
		if($(this).hasClass('sort_desc')){
			$(this).addClass('sort_asc').removeClass('sort_desc')
            $("#sort_asc_star").val(4);
            subhotelinf();
			return;
		}

	});
	  //清空其他的选中值
	function clearOrderByLi(){
          $("#sort_asc_price").val("");
          $("#sort_asc_star").val("");
      }
	</script>
</html>
